<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:foods
     -->
    <div class="QS-content-template QS-foods">
        <div class="foods_console">
            <el-button @click="addFoodsFunc" class="foods_addFoods_btn" type="primary">添加</el-button>
        </div>
        <el-table
            class="mall_table"
            :data="tableData"
            style="width: 100%"
            max-height="410"
        >
            <el-table-column
                prop="recipeName"
                label="食谱名称"
                width="calc(22.5%)">
            </el-table-column>
            <el-table-column
                prop="recipeType"
                label="配餐分类"
                width="calc(22.5%)">
            </el-table-column>
            <el-table-column
                prop="makingDiff"
                label="制作难度"
                width="calc(22.5%)">
            </el-table-column>
            <el-table-column
                prop="makingTime"
                label="制作时间"
                width="calc(22.5%)">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="calc(10%)">
                <template class="mall_console" slot-scope="scope">
                    <el-button
                        class="mall_console_btn el-icon-edit"
                        @click.native.prevent="editRow(scope.$index, tableData[scope.$index])"
                        type="text"
                    >
                    </el-button>
                    <el-button
                        class="mall_console_btn el-icon-delete"
                        @click.native.prevent="deleteRow(scope.$index, tableData[scope.$index])"
                        type="text"
                    >
                    </el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        <div class="block block_pagenation">
            <!-- <span class="demonstration">直接前往</span> -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="totalNum">
            </el-pagination>
        </div>



        <!-- <el-dialog
            title="添加食谱"
            :visible.sync="dialogVisible"
            width="90%"
            @close="closeDialog"
        >
            <div class="mall_add">
                <QSMakeFoods
                    :key="new Date().getTime()"
                    :subData="subData"
                    :mainFoodsSub="mainFoodsSub"
                    :subFoodsSUb="subFoodsSUb"
                    :makingFoodsSub="makingFoodsSub"
                    @getFoodsList="getFoodsList"
                ></QSMakeFoods>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import QSMakeFoods from '@/views/QSMakeFoods';
export default {
	components: {
        QSMakeFoods
	},
	data(){
		return {
            tableData: [],//列表数据
            totalNum:0,//所有数据数量
            currentPage:1,//默认分页
            dialogVisible:false,//dialog flag
            subData:{},//传入子组件对象

            mainFoodsSub:[],
            subFoodsSUb:[],
            makingFoodsSub:[],
		}
    },
    mounted(){
        this.getFoodsList(0);
    },
    methods:{
        addFoodsFunc(){
            this.subData.item = {};
            // this.dialogVisible = true;
            this.$router.push({
                name:'QSMakeFoods',
                query: {
                    asubData:null,
                    amainFoodsSub:[],
                    asubFoodsSUb:[],
                    amakingFoodsSub:[],
                }
            })
        },
        editRow(index, item) {
            console.log('item===',item)
            this.mainFoodsSub = JSON.parse(item.mainFoods.replace(/%2%/g,'"'));
            this.subFoodsSUb = JSON.parse(item.subFoods.replace(/%2%/g,'"'));
            this.makingFoodsSub = JSON.parse(item.makingFoods.replace(/%2%/g,'"'));
            this.subData.item = item;
            // this.dialogVisible = true;
            this.$router.push({
                name:'QSMakeFoods',
                query: {
                    asubData:this.subData,
                    amainFoodsSub:this.mainFoodsSub,
                    asubFoodsSUb:this.subFoodsSUb,
                    amakingFoodsSub:this.makingFoodsSub,
                }
            })
            // :subData="subData"
            //         :mainFoodsSub="mainFoodsSub"
            //         :subFoodsSUb="subFoodsSUb"
            //         :makingFoodsSub="makingFoodsSub"
        },
        deleteRow(index, item) {

            this.$confirm('确定要删除这一食谱？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                this.delFoodsList(item.id);
            }).catch(() => {        
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getFoodsList(Number(val - 1))
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getFoodsList(Number(val - 1))
        },
        getFoodsList(page){
            
            this.$fetch("recipeList/findlist",{
                page:page ? page.toString() : '0',//第几页
                Size:'10',//每页大小
                isDeleted:'N',
                // recipeType:'',//食谱类型
                // Sort:'',//排序字段,方式
                // officialAccounts:'',//关联的公众号
            }).then(res=>{
                console.log(res)
                this.totalNum = res.total;
                this.tableData.splice(0);
                for(var i = 0;i < res.rows.length;i ++){
                    this.tableData.push(
                        {
                            id:res.rows[i].id || '',//主键
                            recipeName:res.rows[i].recipeName || '',//食谱名称
                            makingTime:res.rows[i].makingTime || '',//配餐制作时间
                            makingDiff:res.rows[i].makingDiff || '',//配餐制作难度
                            mainFoods:res.rows[i].mainFoods || JSON.stringify([{//配餐主料
                                    makingName:'',//用料名称
                                    makingNum:'',//用料数量
                                    iconFlag:false,//删除按钮显隐
                                }]),//配餐主料
                            subFoods:res.rows[i].subFoods || JSON.stringify([{//配餐辅料
                                    subName:'',//用料名称
                                    subNum:'',//用料数量
                                    iconFlag:false,//删除按钮显隐
                                }]),//配餐辅料
                            makingFoods:res.rows[i].makingFoods || JSON.stringify([{//配菜流程
                                    makingProcess:'',//配餐流程
                                    iconFlag:false,//删除按钮显隐
                                }]),//配餐流程
                            recipePictureAddress:res.rows[i].recipePictureAddress || '',//食谱图片地址
                            isDeleted:res.rows[i].isDeleted || '',//是否删除
                            recipeType:res.rows[i].recipeType || '',//食谱类别
                            recipeListPictureAddress:res.rows[i].recipeListPictureAddress || '',//食谱列表展示时图片地址
                        }
                    );
                }

                this.dialogVisible = false;
            })
        },
        closeDialog(){//关闭dialog回调
            this.subData.item = {};
        },
        delFoodsList(id){
            this.$post("recipeList/save",{
                id:id || '',//主键
                recipeType:'',//食谱类别
                makingDiff:'',//配餐制作难度
                makingTime:'',//配餐制作时间
                recipeName:'',//食谱名称
                recipePictureAddress:'',//食谱图片地址
                isDeleted:'Y',//是否删除
                mainFoods:'',//配餐主料
                subFoods:'',//配餐辅料
                makingFoods:'',//配餐流程
                // recipeListPictureAddress:'',//食谱列表展示时图片地址
            }).then(res=>{
                console.log(res)
                this.getFoodsList(0);
            })
        },
    }
}
</script>